<template>
  <div class="page bgc-fff">
    <div class="pad-l-r15 pad-t-b10 flex a-between lcenter">
      <x-input style="width: 80%;border-radius: .04rem;" class="bor-1-BBBBBB" placeholder="运单/司机/车辆信息"></x-input>
      <i @click="toNav()" class="iconfont icon-add-user f20 c-01a4f6"></i>
    </div>
    <div class="pad-l-r15">
      <flexbox :gutter="0" class="pad-b20 bor-bottom">
        <flexbox-item :span="1/4" v-for="(item,index) in navList" :key="index">
          <div class="flex-demo ta-c" @click="toNav(item.link)">
            <i class="iconfont f20 c-01a4f6" :class="item.icon"></i>
            <span class="f14">{{item.title}}</span>
          </div>
        </flexbox-item>
      </flexbox>
    </div>
    <!--<Divider></Divider>-->
    <div class="pad-l-r15 pad-t-b10 c-01a4f6 f14">新运单通知</div>
    <div class="mo-spacing"></div>
    <div class="main-body"
      :style="[{'-webkit-overflow-scrolling': scrollMode}]" :class="[{'bgc-fff':shipListData.length==0}]">
      <div v-if="shipListData.length==0" class="f16 ta-c pad-l-r15 mt30">您暂无运单数据</div>
      <v-loadmore v-else :top-method="loadTop" :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        :auto-fill="false" ref="loadmore">
        <div v-for="(item,index) in shipListData" :key="index" @click="waybillClick(item)">
          <div class="waybill-item">
            <!-- con-1 -->
            <div class="flex a-between l-center mb10 pad-l-r15">
              <div class="flex a-left l-center">
                <img :src="staticImgData.imgurla" class="icon-tou mr15" alt="">
                <span class="c-1E90FF f16 bold mr5">运单通知</span>
                <span class="c-1E90FF f16">{{item.code}}</span>
              </div>
              <div>
                <!-- 拓展预留 -->
              </div>
            </div>
            <!-- con-2 -->
            <div class="pad-l-r15 bor-bottom" >
              <div v-show="index2 < 2"  v-for="(item2,index2) in item.shipTaskCountBos" :key="index2"
                :class="[{'bor-bottom':index2 <(2-1)}]">
                <div class="f14 c-333 pad15 ta-l flex l-center a-start" >
                  <span class="c-999">运输任务：</span><span>{{item2.taskCode}}</span>
                </div>
                <div class="f12 c-999 f-l ta-l pad-l-r15">
                  {{item2.gmtCreate|parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
                </div>
                <!-- con-3 -->
                <div class="f14 c-000 mt20  pad-l-r15" >
                  <div class="flex a-between l-center mb15">
                    <p class="c-666">起运地：</p>
                    <p v-if="item2.startAddress">{{item2.startAddress}}</p>
                    <p v-else>暂无</p>
                  </div>
                  <div class="flex a-between l-center mb15">
                    <p class="c-666">目的地：</p>
                    <p v-if="item2.endAddress">{{item2.endAddress}}</p>
                    <p v-else>暂无</p>
                  </div>
                  <div class="flex a-between l-center mb15">
                    <p class="c-666">运抵时间：</p>
                    <p v-if="item2.gmtDeliver">{{item2.gmtDeliver|parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                    <p v-else>暂无</p>
                  </div>
                  <div class="flex a-between l-center">
                    <p class="c-666">车辆台数：</p>
                    <p v-if="item2.itemCount">{{item2.itemCount}}台</p>
                    <p v-else>暂无</p>
                  </div>
                  <div style="height:.2rem;"></div>
                </div>
              </div>
            </div>
            <!-- con-4 -->
            <div class="f16 c-1E90FF ta-r h100 line-h100 pad-l-r15">
              详情 <i class="iconfont icon-arrow-right3 f14"></i>
            </div>
          </div>
          <div class="mo-spacing"></div>
        </div>
      </v-loadmore>
      <div style="height:.5rem;"></div>
    </div>
    <v-tabbar></v-tabbar>
    <v-loading v-show="loadingShow"></v-loading>
    <confirm
      v-model="confirmShow"
      :show-cancel-button="false"
      :title="confirmData.title"
      :content="confirmData.context"
      @on-confirm="onConfirm">
    </confirm>
  </div>
</template>

<script >
import LisaTabbar from '@/components/common/tabbar/tabbar'
import { XInput, Flexbox, FlexboxItem, Divider, Confirm } from 'vux'
import { mapState } from 'vuex'
import * as WaybillApi from '@/api/waybill'
import { Loadmore, Toast } from 'mint-ui'
import Loading from '@/components/common/loading/loading'
import * as SessionS from '@/utils/store/storage'
import * as ThreeStorage from '@/utils/store/token.js'
import * as DirverApi from '@/api/dirver'
export default {
  name: 'driver-home',
  data() {
    return {
      loginType: '',
      navName: '', // footer_nav 传选中nav的name
      staticImgData: {
        imgurla: require('@/assets/image/v1/waybill/waybill_list/icon_tou.png')
      },
      navList: [
        { title: '报班', icon: 'icon-checkIn', link: 'me-driverCheckin' },
        { title: '公司信息', icon: 'icon-company', link: 'me-driverCompanyProfile' },
        { title: '牵引车', icon: 'icon-carrier', link: 'me-driverCarrier' },
        { title: '挂车', icon: 'icon-tarrier', link: 'me-driverTarrier' }
      ],
      shipListData: [],
      page: {
        current: 1,
        size: 2,
        total: 1,
        condition: {
          driverId: ''
        }
      },
      isCanCheck: false, // 能否报班
      isCheckList: [],
      confirmShow: false, // vux-confirm提示弹窗
      confirmData: {
        title: '提示',
        context: '正在建设中,后续开放...'
      },
      loadingShow: false,
      allLoaded: false, // 是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
      scrollMode: 'auto' // 移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
    }
  },
  computed: {
    ...mapState({
      DriverId: state => state.account.DriverId
    })
  },
  components: {
    XInput, Flexbox, FlexboxItem, Divider, Confirm,
    'v-loadmore': Loadmore,
    'v-loading': Loading,
    'v-tabbar': LisaTabbar
  },
  created() {
    this.getDriverIsAuth() // 司机 牵引车 挂车认证状态来 判断报班限制
    this.loadPageList()
  },
  methods: {
    getDriverIsAuth: function() {
      const that = this
      const driver_Id = ThreeStorage.getDriverId()
      that.loadingShow = true
      DirverApi.getInfoIsFill(driver_Id).then(res => {
        if (res.code === 0) {
          // that.resDirverData = res.data
          this.isCanCheck = res.data.canCheckin
          this.isCheckList = res.data.noCheckinReason
        }
      }).catch(res => {
        console.warn('error', res)
      })
    },
    onConfirm: function() {
      console.log('confirm()-确定')
    },
    toNav: function(name) {
      if (name) {
        if (name === 'me-driverCheckin') {
          this.toUserClass()
        } else {
          this.$router.push({ name: name })
        }
      } else {
        this.confirmData.context = '正在建设中,后续开放...'
        this.confirmShow = true
      }
    },
    // 限制报班提示
    toUserClass: function() {
      if (!this.isCanCheck) {
        let res_html = ''
        let create_html = ''
        const res_list = this.isCheckList
        for (const k in res_list) {
          const item = res_list[k]
          const kk = k * 1 + 1
          res_html = '<div class="flex l-center a-left"><span class="ml20" style="font-size: 0.14rem;color: #888;font-weight: 400;text-algin:left;float:left;">' + kk + '. ' + item + '</span><br/></div>'
          create_html += res_html
        }
        console.log('res_html', res_html, 'create_html', create_html)
        if (create_html !== '') {
          this.confirmData.context = create_html
          this.confirmShow = true
        }
      } else {
        this.$router.push({ name: 'me-driverCheckin' })
      }
    },
    loadTop: function() { // 组件提供的下拉触发方法
      // 下拉加载
      this.loadingShow = true
      this.allLoaded = false// 刷新时置为true
      this.page.current = 1// 从第1页开始
      this.loadPageList()
      this.$refs.loadmore.onTopLoaded() // 固定方法，查询完要调用一次，用于重新定位
    },
    loadBottom: function() {
      // 上拉加载
      this.loadingShow = true
      this.getMore() // 上拉触发的分页查询
      this.$refs.loadmore.onBottomLoaded() // 固定方法，查询完要调用一次，用于重新定位
    },
    loadPageList: function() {
      // 查询数据
      const that = this
      const driver_Id = ThreeStorage.getDriverId()
      that.page = {
        current: 1,
        size: 2,
        total: 1,
        condition: {
          driverId: driver_Id
        }
      }
      that.loadingShow = true
      WaybillApi.getWaybillList(that.page).then(res => {
        // 是否还有下一页，加个方法判断，没有下一页要禁止上拉
        if (res.code === 0) {
          that.shipListData = res.data.records
          if (that.page.current > 1) {
            that.isHaveMore(res.data)
          }
          that.loadingShow = false
        } else {
          console.warn('error', res)
          that.loadingShow = false
        }
        that.$nextTick(function() {
          that.scrollMode = 'touch'
        })
      }).catch(res => {
        this.loadingShow = false
        console.log('error', res)
      })
    },
    getMore: function() {
      // 分页查询
      const that = this
      that.page.current = parseInt(that.page.current) + 1
      WaybillApi.getWaybillList(that.page).then(res => {
        this.loadingShow = false
        if (res.code === 0) {
          that.shipListData = that.shipListData.concat(res.data.records)
          if (that.page.current > 1) {
            that.isHaveMore(res.data)
          }
        }
      }).catch(res => {
        this.loadingShow = false
        console.warn('error', res)
      })
    },
    isHaveMore: function(data) {
      // 是否还有下一页，如果没有就禁止上拉刷新
      const that = this
      const now_show_num = that.shipListData.length
      const get_total = data.total
      if (now_show_num < get_total) {
        // 展示的条数 小于 后端总条数 还可以下拉加载更多
        console.log('可继续下拉加载更多')
        this.allLoaded = false
      } else if (now_show_num === get_total) {
        // 展示的条数 等于 后端总条数 没有更多数据 不能进行下拉加载
        console.log('没有更多数据，不能进行下拉')
        this.allLoaded = true
        Toast({
          message: '没有更多数据了',
          duration: 1000
        })
      }
    },
    waybillClick: function(item) {
      const that = this
      SessionS.saveToSession('waybillItem', item)
      that.$router.push({ name: 'shipOrder-driverDetail', params: { waybillItem: item }})
    }
  }
}
</script>

<style scoped>
  @import '../../styles/util.css';
  /* common */
  .page{
    overflow-y: auto;
    background-color: #f4f4f4;
  }
  .page.bgc-fff{
    background-color: #fff;
  }
  .h100{
    height: .5rem;
  }
  .line-h100{
    line-height: .5rem;
  }
  .waybill-item{
    padding:.21rem 0 0 0;
    background-color: #fff;
    border-radius: .04rem;
  }
  .icon-tou{
    width: .04rem;
    height: .15rem;
  }
  div>span{
    display: block;
  }
  /* 禁掉 vux-ui中 使用 weui-ui 中的样式 */
  .weui-cell{
    padding: 0 0 0 .05rem;
  }
</style>
